<style lang="less">
	/*@import './international.less';*/
</style>

<template>
	<div>
		<common-page v-bind="menuPage">
			<template slot="modal">
				<Form :model="menuPage.detailData" :label-width="80">
					<FormItem label="菜单名">
						<autoSelect :model.sync="menuPage.detailData.menuSn" url="menu/list" valueField="name"></autoSelect>
					</FormItem>
					<FormItem label="sn">
						<Input v-model="menuPage.detailData.sn"></Input>
					</FormItem>
					<FormItem label="状态">
						<Select v-model="menuPage.detailData.state">
							<Option value="1" :key="1">有效</Option>
							<Option value="2" :key="2">无效</Option>
						</Select>
					</FormItem>
					<FormItem label="文字">
						<Input v-model="menuPage.detailData.text"></Input>
					</FormItem>
					<FormItem label="类型">
						<Select v-model="menuPage.detailData.type">
							<Option value="toolbar" :key="1">工具栏按钮</Option>
							<Option value="rowbar" :key="2">行按钮</Option>
						</Select>
					</FormItem>
					<FormItem label="排序">
						<Input v-model="menuPage.detailData.sort"></Input>
					</FormItem>
				</Form>
			</template>
		</common-page>
	</div>
</template>

<script>

    import commonPage from '@/views/common/common-page.vue';
    import util from '@/libs/util';
    import autoSelect from '@/views/common/autoSelect.vue';

    // 默认界面查询条件
    let pageParams = Object.assign({}, util.queryParams, { // 额外的参数,比如条件的默认值
        sortName: "id",
        sortOrder: "asc"
    });
    export default {
        name: 'page-page',
        components: {
            commonPage,
            autoSelect
        },
        props: {
            columns: Array
        },
        data () {
            return {
                menuPage: {
                    toolbar: {
                        menuSn: "page",
                        buttons: []
                    },
                    list: {
                        table: {
                            columns: [{type: 'selection', width: 50, align: 'center'},
                                {type: 'index', width: 60, align: 'center'},
                                {title: 'ID', key: 'id', sortable: "custom"},
                                {title: '菜单', key: 'menuName'},
                                {title: '菜单Sn', key: 'menuSn'},
                                {title: 'Sn', key: 'sn'},
                                {
                                    title: '状态', key: 'state', render: (h, obj) => {
                                    if (obj.row.state === "1") {
                                        return "有效";
                                    } else if (obj.row.state === "2") {
                                        return "无效";
                                    }
                                    return obj.row.state;
                                }
                                },
                                {title: '文字', key: 'text'},
                                {title: '排序', key: 'sort'}
                            ],
                            data: []
                        },
                        url: "page/list",
                        queryParams: pageParams

                    },
                    searchbar: {
                        queryParams: pageParams,
                        inputs: [{
                            text: "菜单Sn",
                            sn: "menuSn",
                            style: {
                                width: "200px"
                            }
                        }, {
                            text: "菜单名",
                            sn: "menuId",
                            type: "autoSelect",
                            url: "menu/list",
                            valueField: "id",
                            style: {
                                width: "200px"
                            }
                        }]
                    },
                    pageParams: pageParams,
                    detailData: {
                        menuSn: "",
                        id: "",
                        sn: "",
                        text: "",
                        type: "",
                        state: 1,
                        sort: "1",
                    }
                }
            };
        },
        methods: {},
        created () {
        },
        mounted() {
        }
    };
</script>
